Learn CSS Media Query In 7 Minutes

We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

8 天前 · The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

8 天前 · Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics. Media · Testing media queries · Width · Reduced motion

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {. //CSS. } /*. ##Device = Low Resolution Tablets, Mobiles (Landscape). ##Screen ...

Media Query[1]. 它是由一個media type ... orientation: 橫向/縱向顯示. @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … }.

其他設定​ ; device-width, 裝置器的寬度, V ; device-height, 裝置器的高度, V ; orientation, 選擇直向（portrait）或橫向（landscape） ...

Here is my media query: @media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){

It seems like currently it only detects orientation: landscape and applies the styles without looking at max-width. Can anyone see the problem?

Learn how to write a media query to target devices in landscape mode in CSS with this helpful guide from W3Schools.

Orientation: Portrait / Landscape​​ Media queries can also be used to change layout of a page depending on the orientation of the browser.